<template>
	<view class="layout">
		<view class="">
				<uni-steps :options="list" :active="active" />
		</view>
		<view class="text">完成下面的按钮点击小游戏就可以联系作者</view>
		<view class="butsu" v-if="ifshow">
			<button class="mini-btn mini-btn1" type="default" size="mini"  @click="butclick">按钮</button>
		</view>
		<view class="butsu" v-if="isif">
			<button class="mini-btn mini-btn2" type="default" size="mini"  @click="butclicks">按钮</button>
		</view>
		
		<view class="butsu" v-if="iSimg">
			<image class="image" src="/static/3.png" mode="aspectFill"></image>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
let ifshow=ref(true)
let iSimg=ref(false)
let isif=ref(false)
let active=ref(0)
let	list=ref([{title:'阅读标题'},{title:'点击按钮'},{title:'作者联系方式出现'}])
function butclick(){
	  ifshow.value=false
	  isif.value=true
	  active.value=1
}
function butclicks(){
      isif.value=false
	  iSimg.value=true
	  active.value=2
}
</script>

<style lang="scss" scoped>
.layout{
	width: 750rpx;
		
	.text{
		font-size: 60rpx;
		text-align: center;
		margin-top: 60rpx;
	}
	.butsu{
		height: 600rpx;
		margin-top: 300rpx;
		margin-left:30rpx ;
		margin-right :30rpx ;

		.mini-btn1{
			animation:vv 4s  infinite;
		}
		.mini-btn2{
			animation:vv 4s  infinite;
		}
		.image{
			width: 100%;
			height: 100%;
		}
	}
}
	
	
@keyframes vv {
            0% {
                transform: translate(0, 0);
            }

            10% {
                transform: translate(570rpx, 100rpx);
            }
			20% {
                transform: translate(270rpx, 400rpx);
            }
			30% {
                transform: translate(270rpx, 500rpx);
            }
			40% {
                transform: translate(470rpx, 400rpx);
            }

            50% {
                transform: translate(570rpx, 350rpx);
            }
			 60% {
                transform: translate(0rpx, 30rpx);
            }
			 70% {
                transform: translate(400rpx, 330rpx);
            }

            75% {
                transform: translate(200rpx, 550rpx);
            } 
			80% {
                transform: translate(20rpx, 50rpx);
            } 
			85% {
                transform: translate(200rpx, 550rpx);
            } 
			90% {
                transform: translate(500rpx, 0rpx);
            }
			 95% {
                transform: translate(0px, 400rpx);
            }

            100% {
                transform: translate(0, 0);
            }
        }
</style>
